<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="会员信息" name="first" class="msg">
                <el-row>
                    <el-col :span="12"><span>会员姓名：</span>admin</el-col><el-col :span="12" class="flex"><span>卡内余额：</span>52元
                        <span class="chongzhi"><img src="@/assets/image/chognzhi.png" alt="">去充值</span></el-col>
                </el-row>
                <el-row>
                    <el-col :span="12"><span>会员生日：</span>2099-09-04</el-col><el-col
                        :span="12"><span>累计消费：</span>52元</el-col>
                </el-row>
                <el-row>
                    <el-col :span="12"><span>联系电话：</span>17594829454</el-col><el-col :span="12"><span>累计充值：</span>52元
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12"><span>消费次数：</span>175次</el-col><el-col
                        :span="12"><span>特点：</span>特点:特点:特点:特点:特点:</el-col>
                </el-row>
                <el-row>
                    <el-col :span="12"><span>备注信息：</span>啊啊分舰队从昆明</el-col><el-col :span="12"><span>剩余积分：</span>52份 </el-col>
                </el-row>
                <el-row type="flex" class="rowbottom" justify="space-between">
                    <el-col class="left">
                        上次消费：<span class="money">999</span><span class="dollor">元</span>
                    </el-col>
                    <el-button type="primary" @click="cancel">关闭</el-button>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="操作日志" name="second">
                <el-form ref="form" :model="form" :inline="true">
                    <el-form-item label="">
                        <el-date-picker v-model="form.value" type="datetimerange" start-placeholder="开始日期"
                            end-placeholder="结束日期" :default-time="['12:00:00']" style="width: 300px;">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="success" class="search">查询</el-button>
                    </el-form-item>


                </el-form>
                <el-table ref="table" :data="tableData" border style="width: 100%">

                    <el-table-column prop="name" label="操作人">
                    </el-table-column>
                    <el-table-column prop="cata" label="操作类型">
                    </el-table-column>
                    <el-table-column prop="matter" label="事项">
                    </el-table-column>
                    <el-table-column prop="date" label="时间" align="center">
                    </el-table-column>
                </el-table>
                <p class="txtcenter"><el-button type="primary" @click="cancel">关闭</el-button></p>
            </el-tab-pane>
            <el-tab-pane label="消费记录" name="third">
                <el-form ref="form" :model="form" :inline="true">
                    <el-form-item label="">
                        <el-date-picker v-model="form.value" type="datetimerange" start-placeholder="开始日期"
                            end-placeholder="结束日期" :default-time="['12:00:00']" style="width: 300px;">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="success" class="search">查询</el-button>
                    </el-form-item>


                </el-form>
                <el-table ref="table" :data="tableData" border style="width: 100%">

                    <el-table-column prop="name" label="类型">
                    </el-table-column>
                    <el-table-column prop="cata" label="桌号">
                    </el-table-column>
                    <el-table-column prop="matter" label="金额">
                    </el-table-column>
                    <el-table-column prop="matter" label="扣除卡金">
                    </el-table-column>
                    <el-table-column prop="matter" label="应收金额">
                    </el-table-column>
                    <el-table-column prop="matter" label="方式">
                    </el-table-column>
                    <el-table-column prop="date" label="时间" align="center" width="150">
                    </el-table-column>
                </el-table>
                <p class="txtcenter"><el-button type="primary" @click="cancel">关闭</el-button></p>
            </el-tab-pane>
            <el-tab-pane label="积分记录" name="fourth">
                <el-form ref="form" :model="form" :inline="true">
                    <el-form-item label="">
                        <el-date-picker v-model="form.value" type="datetimerange" start-placeholder="开始日期"
                            end-placeholder="结束日期" :default-time="['12:00:00']" style="width: 300px;">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="success" class="search">查询</el-button>
                    </el-form-item>


                </el-form>
                <el-table ref="table" :data="tableData" border style="width: 100%">

                    <el-table-column prop="name" label="会员姓名">
                    </el-table-column>
                    <el-table-column prop="cata" label="桌号">
                    </el-table-column>
                    <el-table-column prop="matter" label="获得积分">
                    </el-table-column>
                    <el-table-column prop="date" label="时间" align="center">
                    </el-table-column>
                </el-table>
                <p class="txtcenter"><el-button type="primary" @click="cancel">关闭</el-button></p>
            </el-tab-pane>
            <el-tab-pane label="兑换记录" name="fiveth">
                <el-form ref="form" :model="form" :inline="true">
                    <el-form-item label="">
                        <el-date-picker v-model="form.value" type="datetimerange" start-placeholder="开始日期"
                            end-placeholder="结束日期" :default-time="['12:00:00']" style="width: 300px;">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="success" class="search">查询</el-button>
                    </el-form-item>


                </el-form>
                <el-table ref="table" :data="tableData" border style="width: 100%">

                    <el-table-column prop="name" label="会员姓名">
                    </el-table-column>
                    <el-table-column prop="cata" label="兑换商品">
                    </el-table-column>
                    <el-table-column prop="matter" label="兑换数量">
                    </el-table-column>
                    <el-table-column prop="matter" label="消耗积分">
                    </el-table-column>
                    <el-table-column prop="date" label="兑换时间" align="center" width="150">
                    </el-table-column>
                </el-table>
                <p class="txtcenter"><el-button type="primary" @click="cancel">关闭</el-button></p>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
  
<script>

export default {
    name: "",

    data() {
        return {
            activeName: 'first',
            form: {
                value: ''
            },
            tableData: [{
                name: '厉飞雨',
                cata: '类型',
                matter: '事项',
                date: '2099-09-09  11:04:51'
            }, {
                name: '厉飞雨',
                cata: '类型',
                matter: '事项',
                date: '2099-09-09  11:04:51'
            }, {
                name: '厉飞雨',
                cata: '类型',
                matter: '事项',
                date: '2099-09-09  11:04:51'
            }, {
                name: '厉飞雨',
                cata: '类型',
                matter: '事项',
                date: '2099-09-09  11:04:51'
            }],
        }
    },
    created() {

    },
    methods: {
        cancel() {
            this.$emit('update:close', false)
        },
        handleClick(tab, event) {
            console.log(tab, event);
        }
    }
};
</script>
<style>
.el-tabs__item.is-active {
    color: #CAAB62;
}

.el-tabs__active-bar {
    background-color: #CAAB62;
}
</style>
<style scoped rel="stylesheet/scss" lang="scss">
.txtcenter {
    text-align: right;
    margin-top: 20px;
}

.search {
    background-color: #CAAB62;
    border-color: #CAAB62;
}

.msg {
    font-size: 14px;
    color: #9C9186;
    line-height: 35px;

    span {
        color: #201D1B;
    }

    .chongzhi {
        background-color: #FFB800;
        font-size: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        color: #fff;
        line-height: normal;
        padding: 4px 10px 4px 0;
        margin-left: 10px;

        img {
            margin-right: 5px;
        }
    }

    .flex {
        display: flex;
        align-items: center;

        img {
            margin-left: 10px;
        }
    }

    .rowbottom {
        border-top: 1px solid #EBEEF5;
        align-items: center;
        padding-top: 20px;

        .left {
            color: #CAAB62;
            font-size: 18px;

            .dollor {
                font-size: 14px;
            }

            .money {
                color: #EC341B;
            }
        }
    }
}</style>
  